<template>
  <div :style="'background-color:' +theme.background+';width: 100%;min-height: 100%;'">
    <el-row :gutter="10" class="the_app_first " style="padding: 0;margin: 0">
      <!--      左部分,宽屏幕显示-->
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="hidden-sm-and-down ">

        <div class="left_1 shadow" :style="'background-color:'+theme.secondaryBackground">

          <div style="margin-left: 10%" @click="themeSwitch()"
               :style="'color:'+theme.numberOneTextColor">
            <img src="./static/img/lamp.png" style="width: 50px;height:50px">
          </div>
          <div class="homeMenu">
            <a class="headline">{{site_title}}</a>
            <p style="margin-top: 2em" :style="'color:'+theme.numberOneTextColor">
              {{site_subheading}}</p>
          </div>
          <div id="nav"
               style="text-align: center;"
               :style="'background-color:'+theme.secondaryBackground+'color:'+theme.numberOneTextColor">
            <router-link to="/" :style="'color:'+theme.numberOneTextColor">首页</router-link>
            |
            <router-link to="/classification" :style="'color:'+theme.numberOneTextColor">分类
            </router-link>
            |
            <router-link to="/classified" :style="'color:'+theme.numberOneTextColor">归档
            </router-link>
            |
            <router-link to="/about" :style="'color:'+theme.numberOneTextColor">关于</router-link>
            <div type="flex"
                 align="middle" class="bigScreenSearch">
              <el-input
                :style="'-webkit-box-shadow:0 0 0 1000px '+theme.secondaryBackground +' inset !important;'"
                v-model="search_key" placeholder="请输入内容" style="width: 50%"/>
              <el-button icon="el-icon-search" :style="'background-color:'+theme.tertiaryBackground"
                         circle style="margin-left: 1em" @click="search()"/>
            </div>
          </div>
        </div>
      </el-col>
      <div class="hidden-sm-and-up"
           style="background-color: #1c1c1c;;width: 100%;padding-top: 20px;padding-bottom: 20px">
        <!-- 小屏幕菜单 -->
        <div style="width: 100%;">
          <svg style="
             margin-left: 20px;
             margin-right: 20px;" @click="drawer = true" t="1583560769909" class="icon"
               viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2325"
               width="30" height="30">
            <path
              d="M91.947643 260.164345c-15.413038 0-27.985378-12.543687-27.985378-27.980261 0-15.442714 12.57234-27.986401 27.985378-27.986401L931.447583 204.197682c15.46625 0 27.986401 12.543687 27.986401 27.986401 0 15.436574-12.514012 27.980261-27.986401 27.980261L91.947643 260.164345 91.947643 260.164345zM91.947643 260.164345M91.947643 539.999704c-15.413038 0-27.985378-12.567223-27.985378-27.981285 0-15.441691 12.57234-27.985378 27.985378-27.985378L931.447583 484.033042c15.46625 0 27.986401 12.543687 27.986401 27.985378 0 15.414061-12.514012 27.981285-27.986401 27.981285L91.947643 539.999704 91.947643 539.999704zM91.947643 539.999704M91.947643 819.836087c-15.413038 0-27.985378-12.567223-27.985378-27.980261 0-15.414061 12.57234-27.986401 27.985378-27.986401L931.447583 763.869425c15.46625 0 27.986401 12.571317 27.986401 27.986401 0 15.413038-12.514012 27.980261-27.986401 27.980261L91.947643 819.836087 91.947643 819.836087zM91.947643 819.836087"
              p-id="2326" fill="#ffffff"/>
          </svg>
          <p class="smallScreenTitle">{{site_title}}</p>
        </div>
        <el-drawer
          :title="site_subheading"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose">
          <div style="
        text-align: center;
        margin-top: 2em;
background-color: #ffffff;">
            <router-link to="/" @click.native="btnClose">首页</router-link>
            <el-divider direction="vertical"></el-divider>
            <router-link to="/classification" @click.native="btnClose">分类</router-link>
            <el-divider direction="vertical"></el-divider>
            <router-link to="/classified" @click.native="btnClose">归档</router-link>
            <el-divider direction="vertical"></el-divider>
            <router-link to="/about" @click.native="btnClose">关于</router-link>
            <div style="width:100%;align-content: center;margin: 2em auto 0;" type="flex"
                 align="middle">
              <el-input v-model="search_key" placeholder="请输入内容" style="width: 50%"/>
              <el-button icon="el-icon-search" circle style="margin-left: 1em" @click="search()"/>
            </div>
          </div>
        </el-drawer>
      </div>
      <!--      右部分-->
      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
        <div class="right_1">
          <router-view/>
        </div>
        <!--    页脚-->
        <div class="" style="align-content: center;text-align: center;margin: 5em"
             :style="'color:'+theme.numberTwoFontColor">
          <p style="margin: 0 auto">{{the_footer_information}}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/display.css';

  export default {
    data() {
      return {
        search_key: '',
        the_footer_information: '酸牛来',
        site_title: 'concise-blog',
        site_subheading: '大鹏一日同风起,扶摇直上九万里',
        drawer: false,
        direction: 'ttb',

        theme: {},
      };
    },
    created() {
      const that = this;
      that.initializeSystem(that);

      // 初始化系统
      that.theme = that.$store.getters.getTheme;

      // 获取页脚信息
       that.$http.get(`${that.SITE_API}/site_footer_information`).then((res) => {
        that.the_footer_information = res.data;
      });
      // 获取标题
      that.$http.get(`${that.SITE_API}/site_subheading`).then((res) => {
        that.site_subheading = res.data;
      });
      // 获取页脚信息
      that.$http.get(`${that.SITE_API}/site_title`).then((res) => {
        console.log('JSON.stringify(res)>>', res);
        that.site_title = res.data;
      });
    },
    methods: {
      themeSwitch() {
        const that = this;
        const optionalParams = that.$store.state.nightFlag;
        console.log('that.$store.state.nightFlag==>  ', 1 - optionalParams);
        that.$store.dispatch('themeSwitch', 1 - optionalParams);

        this.$router.go(0);
      },
      handleClose(done) {
        done();
      },
      btnClose() {
        this.drawer = false;
      },
      search() {
        const that = this;
        that.$router.push({
          path: '/searchList',
          query: {
            key: that.search_key,
          },
        });
        that.$router.go(0);
        this.drawer = false;
      },
    },
  };
</script>

<style lang="scss">
  .shadow {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.06), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 -1px 0.5px 0 rgba(0, 0, 0, 0.09);
    border-radius: initial;
  }

  .right_1 {
    /*background-color: #ffffff;*/
    /*height: auto;*/
    margin-right: 3%;
    margin-left: 3%;
    /*padding-bottom: 5%;*/
  }

  .left_1 {
    height: auto;
    margin-left: 10%;
    min-width: 280px;
    padding-bottom: 20%;
  }

  .the_app_first {
    padding-bottom: 1em
  }


  #nav {
    padding-top: 2em;
  }

  .homeMenu {
    text-align: center;
    margin: 5em auto 1em 0;
    align-content: center;
  }

  .headline {
    font-family: 宋体;
    font-weight: bold;
    font-size: 2em;
    color: #ffffff;
    background-color: #000000;
    padding: 0.4em 0.4em 0.4em 0.4em;
  }

  .bigScreenSearch {
    width: 100%;
    align-content: center;
    margin: 50px auto 0;
  }

  .smallScreenTitle {
    color: #ffffff;
    float: right;
    margin-right: 20px;
    font-size: 25px;
    padding-top: 5px;
    margin-top: 0;
    margin-bottom: 0;
  }
</style>
